<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>SACPE 2015</title>
            </f:facet>
            <style>
           body{
               font-size: 12px;
           }            
       </style>
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="148" resizable="true" closable="true" collapsible="true">
                    <div>
                        <h:graphicImage url="../images/calificacion.jpg" alt="Logo"  style="vertical-align: auto" width="100%" height="100%"/> 
                    </div>

                </p:layoutUnit>               
                <p:layoutUnit position="west" size="175" header="..." collapsible="true">
                    <h:form>
                        <p:menu>
                            <p:submenu label="Menú">
                                <p:menuitem value="Inicio" url="/faces/CALIFICACION/CALIFICACION.xhtml" />  
                                <p:menuitem value="Calificación" url="/faces/CALIFICACION/gestionCalificacion.xhtml" /> 
                                <p:menuitem value="Reportes" url="/faces/CALIFICACION/gestionReportes.xhtml" />
                                <p:menuitem value="Cerrar Sesión" actionListener="#{usuarioVista.cerrarSesion_action}" />
                            </p:submenu>                       
                        </p:menu>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <h:form id="formCampos">
                        <p:growl id="growl" showDetail="true" sticky="true" />  
                        <p:messages id="mensajes" showDetail="true" />
                        <p:panel header="Seleccionar Premarcado" id="panelInstitucion">
                            <p:panelGrid>
                                <p:row>
                                    <p:column>
                                        <h:outputText value="Institución"/>                                        
                                    </p:column>
                                    <p:column>
                                        <p:inputText id="txtColegio" disabled="true" binding="#{calificacionVista.txtColegio}"/>
                                        <p:commandButton id="btnSeleccionar" value="..." type="button" binding="#{calificacionVista.btnSeleccionarColegio}"/>
                                        <p:overlayPanel id="institucionPanel" widgetVar="panelInst" for="btnSeleccionar" hideEffect="fade" dynamic="true" style="width:900px"
                                                        showEffect="blind" showCloseIcon="true">
                                            <p:dataTable var="institucion" value="#{calificacionVista.listaInstituciones}" rows="5" paginator="true"
                                                         selectionMode="single" selection="#{calificacionVista.selectedInstitucion}"
                                                         rowKey="#{institucion.idInstitucion}">
                                                <p:ajax event="rowSelect" listener="#{calificacionVista.onRowSelectInstitucion}" 
                                                        update=":formCampos:txtColegio,:formCampos:cmbGrado"
                                                        oncomplete="PF('panelInst').hide()"/>
                                                <p:column headerText="Id" filterBy="#{institucion.idInstitucion}" filterMatchMode="contains">
                                                    <h:outputText value="#{institucion.idInstitucion}" />
                                                </p:column>

                                                <p:column headerText="Nombre" filterBy="#{institucion.nombreinstitucion}"  filterMatchMode="contains">
                                                    <h:outputText value="#{institucion.nombreinstitucion}" />
                                                </p:column>

                                                <p:column headerText="Dirección" filterBy="#{institucion.direccioninstitucion}"  filterMatchMode="contains">
                                                    <h:outputText value="#{institucion.direccioninstitucion}" />
                                                </p:column>

                                                <p:column headerText="Teléfono" filterBy="#{institucion.telefonoinstitucion}"  filterMatchMode="contains">
                                                    <h:outputText value="#{institucion.telefonoinstitucion}" />
                                                </p:column>

                                                <p:column headerText="Ciudad" filterBy="#{institucion.idCiudad.nombreciudad}"  filterMatchMode="contains">
                                                    <h:outputText value="#{institucion.idCiudad.nombreciudad}" />
                                                </p:column>
                                            </p:dataTable>
                                        </p:overlayPanel>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Grado:"/>
                                    </p:column>
                                    <p:column>
                                        <p:selectOneMenu id="cmbGrado" binding="#{calificacionVista.cmbGrupo}">
                                            <f:selectItem itemLabel="Seleccione" itemValue="" noSelectionOption="true"/>
                                            <f:selectItems value="#{calificacionVista.itemsGrupos}" />
                                            <p:ajax listener="#{calificacionVista.onChangeCmbGrupos}" update="cmbCurso"/>
                                        </p:selectOneMenu>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Curso:"/>
                                    </p:column>
                                    <p:column>
                                        <p:selectOneMenu id="cmbCurso" binding="#{calificacionVista.cmbCurso}">
                                            <f:selectItem itemLabel="Seleccione" itemValue="0" noSelectionOption="true"/>
                                            <f:selectItems value="#{calificacionVista.itemsCursos}" />
                                            <p:ajax listener="#{calificacionVista.onChangeCmbCurso}" update="tabla"/>
                                        </p:selectOneMenu>
                                    </p:column>
                                </p:row>
                            </p:panelGrid>
                            <p:dataTable id="tabla" var="pre" value="#{calificacionVista.listaPremarcados}" rows="5" paginator="true"
                                         selectionMode="single" selection="#{calificacionVista.selectedPremarcado}"
                                         rowKey="#{pre.premarcadoPK.idExamen}" emptyMessage="No hay premarcados registrados">
                                <p:ajax event="rowSelect" listener="#{calificacionVista.onRowSelectExamen}" 
                                        update=":formCampos:panelEstudiante,:panelValidarR:tablaVR,:panelValidarR:mensajeValidar,:panelValidarR:cmbSesiones" />
                                <p:column headerText="Id" filterBy="#{pre.examen.idExamen}" filterMatchMode="contains">
                                    <h:outputText value="#{pre.examen.idExamen}" />
                                </p:column>

                                <p:column headerText="Nombre" filterBy="#{pre.examen.nombreexamen}"  filterMatchMode="contains">
                                    <h:outputText value="#{pre.examen.nombreexamen}" />
                                </p:column>

                                <p:column headerText="Tipo" filterBy="#{pre.examen.idTipo.descripcion}"  filterMatchMode="contains">
                                    <h:outputText value="#{pre.examen.idTipo.descripcion}" />
                                </p:column>

                                <p:column headerText="Categoria" filterBy="#{pre.examen.idTipo.idcategoria.descripcion}"  filterMatchMode="contains">
                                    <h:outputText value="#{pre.examen.idTipo.idcategoria.descripcion}" />
                                </p:column>

                                <p:column headerText="Fecha" filterBy="#{pre.fechapremarcado}"  filterMatchMode="contains">
                                    <h:outputText value="#{pre.fechapremarcado}" />
                                </p:column>
                            </p:dataTable>
                        </p:panel>
                        <p:panel header="Calificación"  id="panelEstudiante">
                            <p:panelGrid>
                                <p:row>
                                    <p:column>
                                        <h:outputText value="Examen"/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText disabled="true" id="txtExamen" binding="#{calificacionVista.txtPremarcado}"/>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Curso"/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText disabled="true" id="txtCurso" binding="#{calificacionVista.txtCurso}"/>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Fecha"/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText disabled="true" id="txtFecha" binding="#{calificacionVista.txtFecha}"/>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column colspan="6">
                            <p:panel id="panelUpload">
                                
                                <h:outputText value="Seleccionar Archivo (Carga Masiva de Claves)"/>
                                <p:commandLink id="linkEjemplo" update="panelUpload" onclick="PF('cargueDialog').show();" style="cursor: help;" >  
                                    <h:outputText value="Ver Ejemplo" style="color: #168216; font-weight: bold;"/> 
                                </p:commandLink>
                                <p:fileUpload label="Seleccionar" invalidFileMessage="El Archivo deber ser de Extensión .dat" fileUploadListener="#{calificacionVista.handleFileUpload}" mode="advanced"  update="mensajeArchivo" auto="false" allowTypes="/(\.|\/)(dat)$/"/> 
                                <p:messages id="mensajeArchivo" showDetail="true" /> 
                            </p:panel>
                                        </p:column>
                                    </p:row> 
                                <p:row>
                                    <p:column colspan="6">
                            <p:panel id="panelNuevo">
                             <p:commandButton value="Nuevo Estudiante" type="button" onclick="PF('dlgNuevoEstudiante').show();"
                                                 />
                             <p:commandButton value="Validar Calificación" type="button" onclick="PF('dlgValidar').show()" />
                            </p:panel>
                                        </p:column>
                                    </p:row>
                                </p:panelGrid>
                        </p:panel>
                        
                    </h:form>  
                    
                </p:layoutUnit>
                
 <p:dialog header="Agregar Estudiante" widgetVar="dlgNuevoEstudiante" modal="true" height="300">
     <h:form id="panelNuevoE">
         <p:panelGrid id="panelN">        
            <p:row>
                                    <p:column>
                                        <h:outputText value="Identificación:"/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText id="txtIdentificacion" binding="#{estudiantesVista.txtIdentificacion}"/>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Tipo:"/>
                                    </p:column>
                                    <p:column>
                                        <p:selectOneMenu id="cmTipo" binding="#{estudiantesVista.cmbTipo}">
                                            <f:selectItem itemLabel="CEDULA" itemValue="CEDULA"/>
                                            <f:selectItem itemLabel="TARJETA DE IDENTIDAD" itemValue="TARJETA DE IDENTIDAD"/>
                                        </p:selectOneMenu>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column>
                                        <h:outputText value="Nombre:"/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText id="txtNombre" binding="#{estudiantesVista.txtNombre}"/>
                                    </p:column>
                                    <p:column>
                                        <h:outputText value="Apellido:"/>
                                    </p:column>
                                    <p:column>
                                        <p:inputText id="txtApellido" binding="#{estudiantesVista.txtApellido}"/>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column colspan="4">
                                        <p:commandButton  id="btnRegistrar" action="#{estudiantesVista.registrar_actionC}" value="Registrar" binding="#{estudiantesVista.btnRegistrar}" update="mensajeEstudiante,:panelNuevoE:panelN"/>
                                        <p:commandButton  id="btnLimpiar" action="#{estudiantesVista.limpiar_actionC}" value="Limpiar" binding="#{estudiantesVista.btnLimpiar}" update="mensajeEstudiante,:panelNuevoE:panelN"/>
                                    </p:column>
                                </p:row>
     </p:panelGrid>
       <p:messages id="mensajeEstudiante" showDetail="true" /> 
     </h:form>
                            </p:dialog> 
                
                
                <!-- Dialogo para validar notas cuando tiene *-->
                    <p:dialog header="Validar Notas" widgetVar="dlgValidar" modal="true" height="300">
     <h:form id="panelValidarR">         
       <p:messages id="mensajeValidar" showDetail="true" />        
       <p:panelGrid>
           <p:row>
               <p:column>
                   <h:outputText value="Sesión a Revisar:"/>
               </p:column>
               <p:column>
                   <p:selectOneMenu id="cmbSesiones" binding="#{calificacionVista.cmbSesion}">
                        <f:selectItem itemLabel="Seleccione" itemValue="0" noSelectionOption="true"/>
                        <f:selectItems value="#{calificacionVista.itemsSesiones}" />
                        <p:ajax update="tablaVR"/>
                    </p:selectOneMenu>
               </p:column>
           </p:row>
           <p:row>
               <p:column colspan="2">
                   <p:dataTable id="tablaVR" var="estudiante" value="#{calificacionVista.listaEstudiantes}" editable="true" editMode="cell">
        <f:facet name="header">
           De click en la respuesta(s) que desee modificar, cambie la calificación y presione la Tecla Enter
       </f:facet>
       <p:ajax event="cellEdit"  listener="#{calificacionVista.onCellEdit}" update=":panelValidarR:mensajeValidar" />
       
        <p:columnGroup type="header">
            <p:row>
               <p:column rowspan="2" headerText="Estudiante" />
               <p:column colspan="#{calificacionVista.cantidadPreguntas}" headerText="Respuestas" />                
            </p:row>
            <p:row>
                <ui:repeat value="#{calificacionVista.preguntas}" var="p">
                    <p:column headerText="#{p}" />
                </ui:repeat>
            </p:row>
        </p:columnGroup>
        <p:column>
            <h:outputText value="#{estudiante.idEstudiante}" />
        </p:column>
        <p:columns value="#{calificacionVista.preguntas}" var="res" styleClass="ui-editable-column">
            <p:cellEditor>
               <f:facet name="output"><h:outputText value="#{calificacionVista.getRespuesta(estudiante.idEstudiante, res)}" /></f:facet>
               <f:facet name="input"><p:inputText value="#{calificacionVista.getRespuesta(estudiante.idEstudiante, res)}" binding="#{calificacionVista.claveP}" style="width:100%"/></f:facet>
            </p:cellEditor>
        </p:columns>
        <f:facet name="footer">
            Respuestas registradas
        </f:facet>
   </p:dataTable>
               </p:column>
           </p:row>
       </p:panelGrid>
     </h:form>
                            </p:dialog> 
                
                <!-- dialogo de ejemplo cargue -->
                        <p:dialog id="modalDialogEjemplo" header="Ejemplo Archivo de Cargue" widgetVar="cargueDialog" showEffect="fade" hideEffect="bounce" modal="true" dynamic="true">  
                            <p align="justify">                       
                                El archivo para cargar masivamente las calificaciones, debe tener la extesión .dat y debe tener la siguiente estructura:<br/><br/>
                            <div align="center" >
                                <h:graphicImage url="images/ayudaDat.png" alt="Cargue Instructores"/>
                            </div>                    
                            <br/>                    
                            </p>
                        </p:dialog>
            </p:layout>
            <!-- Dialogo de confirmacion para el boton eliminar -->
            <h:form id="formDialog" > 
                <p:confirmDialog id="confirmDialog" message="Está Seguro de Eliminar el estudiante?"  
                                 header="Confirmación" showEffect="fade" hideEffect="explode" severity="alert" widgetVar="confirmation">  
                    <p:commandButton id="confirm" value="Si" oncomplete="PF('confirmation').hide();" 
                                     update=":panelNuevoE:mensajeEstudiante,:formCampos:panelEstudiante"  
                                     actionListener="#{estudiantesVista.eliminar_action}" />  
                    <p:commandButton id="decline" value="No" onclick="PF('confirmation').hide();" type="button" />   

                </p:confirmDialog> 
            </h:form>
        </h:body>

    </f:view>
</html>

